<template>
	<view class="container">
		<block v-if="goods.num>0">
			<view class="goods-item del flex-1" @click="changeGoods($event,'0')">-</view>
			<input maxlength="2" type="number" class="my-input" :value="goods.num" @input="changeGoods($event,'1')" />
		</block>
		<view class="goods-item flex-1" @click="changeGoods($event,'2')">+</view>
	</view>
</template>

<script>
	export default {
		name: "goods-button",
		props: {
			goods: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {

			};
		},
		methods: {
			changeGoods(e, type) {
				let params = {
					type: type,
					goods: this.goods
				}
				if (type == 1) {
					params.num = e.detail.value / 1
				}
				this.$emit('change-goods', params)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: absolute;
		right: 12rpx;
		bottom: 12rpx;

		.my-input {
			width: 30px;
			text-align: center;
		}

		.goods-item {
			width: 22px;
			height: 22px;
			background-color: #42B983;
			border-radius: 50px;
			color: #FFF;
			font-size: 18px;
		}

		.del {
			border: 1px solid #F00000;
			background-color: #FFF;
			color: #F00000;
			box-sizing: border-box;
		}
	}
</style>